<template>
  <div class="middle-box">
    <div class="interval-total">
      <Superscript :leftTop="false" :rightBottom="false"></Superscript>
      <div class="interval-total-box">
        <div class="interval-total-item" v-for="(item, index) in intervalTotal" :key="index">
          <div class="interval-total-item-label">{{ dayLabel[index] }}</div>
          <count size="large" :endVal="parseInt(item)" :id="`myDayTotal_${index}`" class="data-item"></count>
          <div class="border-right"></div>
        </div>
      </div>
    </div>
    <div class="map-box">
      <div id="trade-map"></div>
    </div>
    <div class="middle-bottom">
      <div class="middle-bottom-left">
        <Superscript :title="titleList[0]"></Superscript>
        <div class="middle-bottom-left-box">
          <div class="middle-bottom-left-left">
            <div class="middle-bottom-left-item" v-for="(item, index) in deviceData" :key="index">
              <count size="big" :endVal="deviceData[index]" :id="`deviceTotal_${index}`"></count>
              <div class="label">{{deviceLabel[index]}}</div>
            </div>
          </div>
          <div class="middle-bottom-left-right">
            <Per id="deviceOnlineRate" width="85%" height="100%" type="blue" :val="deviceOnlineRate" content="机具在线率"></Per>
          </div>
        </div>
      </div>
      <div class="middle-bottom-right">
        <Superscript :title="titleList[1]"></Superscript>
        <div class="middle-bottom-right-box">
          <SexRosePie id="sexRate"></SexRosePie>
          <AreaRosePie id="areaRate"></AreaRosePie>
          <HorizontalBar id="ageBar"></HorizontalBar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import { setCountUp } from '../../../utils/public'
  import { Superscript, count, Per, SexRosePie, AreaRosePie, HorizontalBar } from '../../../components'
  import tradeMap from '../../../utils/tradeMap'
  export default {
    components: {Superscript, count, Per, SexRosePie, AreaRosePie, HorizontalBar},
    data () {
      return {
        dayLabel: ['实时支付金额', '实时支付笔数', '实时领卡量'],
        titleList: ['机具覆盖', '用户数据'],
        legendData: ['100万以上', '50万-100万', '30万-50万', '10万-30万', '10万以下'],
        deviceLabel: ['机具数','机具在线数']
      }
    },
    computed: {
      ...mapState(['intervalTotal', 'mapData', 'deviceData']),
      deviceOnlineRate () {
        return ((this.deviceData[1] / this.deviceData[0]) * 100).toFixed(2)
      }
    },
    watch: {
      mapData (val, oldval) {
        tradeMap(this.legendData, val)
      }
    },
    mounted () {
      tradeMap(this.legendData, this.mapData)
    }
  }
</script>
<style lang="stylus" scoped>
  @import './index.styl';
</style>
